<!-- 余额 -->
<template>
  <div class="balace">
    <header>
      <div class="my">
        <span @click="toBalace"><van-icon name="cross" size="1.5rem"/></span>
        <h3>我的账户</h3>
        <span><van-icon name="ellipsis" size="1.5rem"/></span>
      </div>
      <div class="my_box">
         <div>
        <p>
          <span class="text">总资产(元)</span>
          <span class="num">{{myList.balance}}</span>
        </p>
        <p>
          <button class='btn' @click='Recharge'>充值</button>
        </p>
          <div class='RechargeBtn' v-if="isCharge">
         <button @click="$router.push('/recharge')">充值未绑卡</button>
         <button  @click="$router.push('/recharge1')">充值已绑卡</button>
      </div>
      </div>
    
      <div>
        <p>
          <span class="text">累计充值(元)</span>
          <span class="num1">{{allNum}}</span>
        </p>
        <p>
          <span class="text">累计消费(元)</span>
          <span class="num1">{{this.count}}</span>
        </p>
      </div>
      </div>
      <div></div>
    </header>

    <main>
       <div class="record">
         <p>
           <img src="../../../images/余额/images/1_03.gif" alt="">
           <span @click="bankCard">银行卡</span>
         </p>
         <p>
            <img src="../../../images/余额/images/1_05.gif" alt="">
           <span @click="setConsumption">消费记录</span>
         </p>
         <p>
            <img src="../../../images/余额/images/1_07.gif" alt="">
           <span>积分中心</span>
         </p>
       </div>
       <div class="imgs">
          <img src="../../../images/余额/images/1_13.gif" alt="">
          <img src="../../../images/余额/images/1_15.gif" alt="">
       </div>
       <div class="bottom">
        <div class="top_bottom">
         <div>
            <img class="leftImg" src="../../../images/余额/images/images/hei_03.jpg" alt="">
           <h3>热门推荐</h3>
          <img class="rightImg" src="../../../images/余额/images/images/hei_03.jpg" alt="">
         </div>
        </div>
        <div class="img1">
          <img src="../../../images/余额/images/1_20.gif" alt="">
          <img src="../../../images/余额/images/1_21.gif" alt="">
        </div>
       </div>

    </main>

    <footer>
      <van-icon name="arrow-left"  size="1.5rem" @click="toBalace"/>
      <van-icon name="arrow" color='#cdcdcd' size="1.5rem"/>
    </footer>
  </div>
</template>

<script>
import {apiBalace} from '@/api/balace.js'
import {apiMy} from '@/api/my.js'
import Vue from 'vue';
import { Icon } from 'vant';
import axios from 'axios'
import {mapActions,mapGetters} from 'vuex'
Vue.use(Icon);
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      list:[],
      count:10,
      isCharge:false,
      id:2,
      myList:{}
    };
  },
  //监听属性 类似于data概念
  computed: {
    // ...mapState(['recharge']),
    ...mapGetters(['allNum'])
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
     ...mapActions(['getRecharge']),
    bankCard(){
      // console.log(this.$router)
      this.$router.push('/bankCard')
    },
    setConsumption(){
      this.$router.push('/consumption')
    },
    toBalace(){
      this.$router.push('/layout/my')
    },
    async getMy(){
        const res=await apiMy({
      user_id:1
    })
    this.myList=res.result
    // console.log(res,'ss')
    console.log(this.myList,'ll')
    },
   async priceCount(){
      const res=await axios('/getList')
     this.list=res.data.list;
    // console.log(res)
      this.list.forEach(item=>{
           return this.count+=item.price*1
      })
      // console.log(this.count,'count')

    },
    Recharge(){
      this.isCharge=!this.isCharge;
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
   async created() {
   if( this.getRecharge.length===0){
       this.getRecharge()
       this.priceCount()
   }
    const res1=await axios('/getList')
    console.log(res1)

    apiBalace({
       uid:this.id*1
    }).then(res=>{
      console.log(res,'res')
    })
    
    this.getMy()
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
};
</script>
<style lang="scss" scoped>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
#root,.App{
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;

}
.balace{
  width:100%;
  height:100vh;
   display: flex;
  flex-direction: column;
}
.RechargeBtn{
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 5rem;
  right:-0.125rem;
  border: .0625rem solid #ccc;
  background-color: #fff;
  padding: .3125rem;
}
.RechargeBtn button{
  width: 100%;
  padding: .3125rem;
  color: #000;
  height: 1.875rem;
}
header{
  height:auto;
  width:100%;
  display: flex;
  flex-direction: column;
  background: #f3f3f3;
  color:#000;
}
header .my{ 
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 3.125rem;
  line-height: 3.125rem;
  background-color: #ededed;
  padding:0 .9375rem;
}
.my span{
  margin-top: .625rem;
}

.my_box{
  border-radius: .625rem;
  height:auto;
  width:100%;
  background:-webkit-linear-gradient(left,#e33a33,#f04e3f,#f5675d);
  display: flex;
  flex-direction: column;
  color: #fff;
  padding: 1.25rem 0;
  
}
.my_box div{
  margin-top: 1.25rem;
   display: flex;
  justify-content: space-around;
}
.my_box p{
  display: flex;
  flex-direction: column;
}
main{
  flex: 1;
  overflow-y: auto;
  background-color: #fff;
  margin-top: 1.875rem;
}
.num{
  font-size: 3.125rem;
}
.num1{
  font-size: 1.875rem;
}
.my_box .btn{
  width:5.125rem;
  height:2rem;
  line-height: 2rem;
  border: none;
  background-color: #fff;
  border-radius: 1.25rem;
  color: #eb515d;
  
}
.text{
  color:#fbccae
}
.record{
  width: 100%;
  height: 5rem;
  display:flex;
  justify-content: space-around;
  border-bottom: .0625rem solid #ccc;
  padding-bottom: .625rem;
}
.record p{
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  color: #8b8b8b;
}
.record p img{
  width: 1.875rem;
  height: 1.875rem;
  text-align: center;
}
.imgs{
  display: flex;
}
.imgs img{
  width: 50%;
  padding: .625rem;
}
.top_bottom{
  width: 300px;
  border-bottom: 1px solid;
  text-align: center;
  position: relative;
  height:1.875rem;
  left: 50%;
 margin-left:-9.375rem;
}
.top_bottom div{
  display: flex;
   
  justify-content: space-around;
}
.leftImg{
 position: absolute;
  top: 1.25rem;
  left: 6.5625rem;
  z-index: 1;
  width: .625rem;
}
.rightImg{
  position: absolute;
  top: 1.25rem;
  right: 4.375rem;
  width: .625rem;
}
.top_bottom h3{
  display: flex;
  position: absolute;
  top: .9375rem;
  left: 50%;
  margin-left: -3.125rem;
  text-align: center;
  padding: 0 1.875rem;
  background-color: #fff;
}
.img1{
  width: 100%;
}
.img1 img{
  width: 50%;
}
footer{
  height: 3.125rem;
  line-height: 3.125rem;
  background-color: #f7f7f7;
  display:flex;
  justify-content: space-around;
  padding-top: .625rem;
}

</style>
